<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>

<body>
    <div id="app">
        <form action="http://www.baidu.com">
            <!-- input文字输入框 -->
            <div>
                <span>姓名：</span>
                <span>
                    <input type="text" v-model="username">
                </span>
            </div>

            <!-- radio -->
            <div>
                <span>性别：</span>
                <span>
                    <input type="radio" value="1" v-model="gender">
                    <label for="male">男</label>
                    <input type="radio" value="2" v-model="gender">
                    <label for="male">女</label>
                </span>
            </div>

            <!-- checkbox -->
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="1" v-model='hobby'>
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="2" v-model='hobby'>
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="3" v-model='hobby'>
                <label for="code">写代码</label>
            </div>

            <!-- select 单选 -->
            <div>
                <span>职业：</span>
                <select name="job" id="job" v-model="job">
                    <option value="0">请选择职业</option>
                    <option value="1">教师</option>
                    <option value="2">医生</option>
                    <option value="3">码农</option>
                </select>
            </div>

            <!-- select 多选 -->
            <div>
                <span>电影：</span>
                <select name="movie" id="movie" v-model="movie" multiple>
                    <option value="0">请选择电影</option>
                    <option value="1">电影1</option>
                    <option value="2">电影2</option>
                    <option value="3">电影3</option>
                </select>
            </div>

            <!-- 文本域 -->
            <div>
                <span>描述：</span>
                <textarea name="desc" id="desc" cols="30" rows="10" v-model="desc"></textarea>
            </div>
            <!-- 阻止默认提交行为 -->
            <input type="submit" value="提交" @click.prevent="handel">
        </form>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                username: '',
                gender: '',
                hobby: [],
                job: "0",
                movie: [],
                desc: ''
            },
            methods: {
                handel() {
                    console.log(this.username);
                }
            }
        });
    </script>
</body>

</html>